<template>
    <by-date-picker v-bind="$helper.deleteKeys($attrs, $helper.keys($props), [])" :type="type" v-model="model" @change="change"></by-date-picker>
</template>

<script>
    const {getCurrentInstance, toRef, h, ref, onMounted, watch} = Vue;
    const {loadComponentGroupByName} = $byview;

    const components = await loadComponentGroupByName([
        'byview/components/base/date-picker.vue',
    ]);
    
    export default {
        name:"ByDateRangePicker",
        components,
        
        props: {
            startTime: {
                default: undefined
            },
            
            endTime: {
                default: undefined
            },
            
            type: {
                default:'datetimerange'
            }
        },
        
        setup(props, {slots, emit, attrs}) {
            const {
                /** @type IVueComponentInstance_Ctx */
                ctx
            } = getCurrentInstance();
            
            let model = ref([]);
            
            watch(() => props.startTime, val => {
                model.value[0] = val;
            });
    
            watch(() => props.endTime, val => {
                model.value[1] = val;
            });
    
            model.value = [props.startTime, props.endTime];
            
            let change = _ => {
                emit('update:startTime', model.value[0]);
                emit('update:endTime', model.value[1]);
            };
            
            return {
                change,
                model
            }
        }
    }
</script>
